<template>
  <view class="custom-bg" :style="`min-height: ${windowHeight}px`">
    <view class="custom-header-bg">
      <view>
        <up-tabs
          :list="tabList"
          @click="tabClick"
          :lineColor="`url(${lineBg}) 100% 100%`"
          lineWidth="20"
          lineHeight="7"
          :activeStyle="{ color: '#ffffff', transform: 'scale(1.2)', fontWeight: 'bold' }"
          :inactiveStyle="{ transform: 'scale(1)', color: '#ffffff', fontWeight: 'bold' }"
          itemStyle="padding-left: 20px; padding-right: 15px; height: 34px;"
        ></up-tabs>
      </view>
    </view>

    <view class="position-view">
      <!-- 	<view class="list-view">
				<view style="font-weight: 700;margin-bottom: 10rpx;">活动规则：</view>
				<up-parse :content="activityRule"></up-parse>
			</view> -->
      <view class="header-btn" @click="handleActivityRules">
        <view class="text">活动规则</view>
        <up-icon name="arrow-right" color="#ffffff" size="14"></up-icon>
      </view>
      <view class="instashot-view">
        <up-list-item v-for="(item, index) in datalist" :key="index">
          <view class="list-view" @tap.stop="getDetail(item)">
            <view class="user-avatar-view">
              <up-avatar :src="item.avatar || 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png'" size="40"></up-avatar>
              <view class="user-info">
                <!-- item.realName -->
                <view class="user-name">{{ item.realName }}</view>
                <view class="user-unit">{{ item.orgName }}</view>
              </view>
            </view>
            <view class="title">
              {{ item.description }}
            </view>

            <view class="img-wrap" v-if="item.fileUrl.length > 0">
              <up-image
                v-for="(file, i) in item.fileUrl.slice(0, 3)"
                :key="i"
                :src="file || defaultImg"
                radius="10"
                width="204rpx"
                height="200rpx"
                @tap.stop="previewImage(item.fileUrl, i)"
              ></up-image>
            </view>
            <!-- 	<view class="img-wrap" v-else>
							<up-image src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png" radius="10" width="204rpx" height="200rpx"></up-image>
							<up-image src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png" radius="10" width="204rpx" height="200rpx"></up-image>
							<up-image src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png" radius="10" width="204rpx" height="200rpx"></up-image>
							
						</view> -->

            <view class="bottom-info">
              <view class="name">{{ item.createTime }}</view>
              <view class="option-view">
                <view class="option-item">
                  <up-icon name="chat" color="#999" size="20"></up-icon>
                  <view>{{ item.comments }}</view>
                </view>
                <view class="option-item" @click.stop="getUp(item)">
                  <up-icon v-if="!item.selfLike" name="thumb-up" color="#999" size="20"></up-icon>
                  <up-icon v-else name="thumb-up-fill" color="#d81e06" size="20"></up-icon>
                  <view>{{ item.likes }}</view>
                </view>
              </view>
            </view>
          </view>
        </up-list-item>

        <template v-if="Number(options.id) < 35">
          <view class="btn-view" v-if="datalist.length > 0 && options.isPublish == 'true'">
            <view class="btn" v-if="options.activityStatus !== '2'" @tap="publish">发布</view>
          </view>
        </template>
        <template v-else>
          <view class="btn-view">
            <view class="btn" v-if="options.activityStatus !== '2'" @tap="publish">发布</view>
          </view>
        </template>
      </view>
      <up-empty mode="data" text="暂无数据" icon="https://jqgh-public.yqfoodec.com/20250405/%E7%BB%84%2016@2x_53897.png" v-if="datalist.length == 0"></up-empty>
    </view>
    <!-- isPublish 任务完成了就不能发布了 -->
    <view class="btn-view" v-if="options.activityStatus !== '2' && options.isPublish == 'true'">
      <view class="btn" v-if="datalist.length == 0" @tap="publish">发布</view>
    </view>
  </view>
</template>

<script>
import { activityApi } from '@/api/activity/activity-app.js'
import { countTotalPage } from '@/utils/util'
export default {
  data() {
    return {
      lineBg: 'https://jqgh-public.yqfoodec.com/20250405/%E8%B7%AF%E5%BE%84@2x_53915.png',
      tabList: [
        {
          name: '全部',
        },
        {
          name: '精选',
        },
        {
          name: '我的',
        },
      ],
      pageRequest: {
        page: 1,
        limit: 10,
        seeType: 0,
        walkId: null,
        snapshotId: null,
        walkFeatureId: null,
      },
      hasMore: true,
      datalist: [],
      defaultImg: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png',
      options: {},
      windowHeight: 0,
      status: 'loadmore',
      totalPage: 0,
      activityRule: '',
    }
  },
  onLoad(options) {
    //console.log(options)
    // type='2' 单独的随手拍
    this.options = options
    const id = options.id
    this.pageRequest.walkId = id
    this.pageRequest.snapshotId = id
    this.pageRequest.walkFeatureId = options.walkFeatureId
  },
  onShow() {
    this.pageRequest.page = 1
    this.getDataList()
    this.getsize()
  },
  onReachBottom() {
    if (this.pageRequest.page < this.totalPage) {
      this.pageRequest.page++
      this.status = 'loading'
      this.getDataList()
    } else {
      this.status = 'noMore'
    }
  },
  methods: {
    getsize() {
      let that = this
      uni.getSystemInfo({
        success(res) {
          that.windowHeight = res.windowHeight
        },
      })
    },
    async getDataList() {
      const result = this.options.type ? await activityApi.getSnapshotDetail(this.pageRequest) : await activityApi.snapshotList(this.pageRequest)
      // console.log(result)
      if (result.data.list.length > 0) {
        if (this.pageRequest.page === 1) {
          this.datalist = result.data.list
          this.status = 'noMore'
        } else {
          this.datalist = this.datalist.concat(result.data.list)
        }
        this.totalPage = countTotalPage(result.data.total)
      }
    },
    // 活动规则
    handleActivityRules() {
      let id = this.options.businessId || this.options.id
      uni.navigateTo({
        url: `/brisk-walking/activityRules?id=${id}&type=2`,
      })
    },
    previewImage(images, currentIndex) {
      uni.previewImage({
        current: currentIndex, // 当前显示图片的索引
        urls: images, // 需要预览的图片链接列表
      })
    },
    publish() {
      uni.navigateTo({
        url: `/brisk-walking/instashot/publish?id=${this.pageRequest.walkId}&walkFeatureId=${this.pageRequest.walkFeatureId}`,
      })
    },
    tabClick(e) {
      // seeType 查看类型 0 全部  1 精选 2我的
      this.pageRequest.seeType = e.index // selfFlag == 0?false:true
      this.datalist = []
      this.getDataList()
    },
    async getUp(item) {
      const result = await activityApi.snapshotGiveOrCancel(item.id)
      this.pageRequest.page = 1
      // item.selfLike = !item.selfLike
      // item.likes = item.selfLike?item.likes + 1:item.likes - 1
      this.getDataList()
    },
    getDetail(item) {
      let queryParams = encodeURIComponent(JSON.stringify(item))
      uni.navigateTo({
        url: `/brisk-walking/instashot/comment?id=${item.id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.instashot-view {
  margin-top: 30rpx;
  padding-bottom: 200rpx;
  position: relative;
}
.header-btn {
  position: absolute;
  top: -34rpx;
  right: 0;
  width: 176rpx;
  height: 54rpx;
  font-weight: 500;
  text-align: center;
  line-height: 54rpx;
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 28rpx;
  border-top-left-radius: 46rpx;
  border-bottom-left-radius: 46rpx;
  display: flex;
  justify-content: center;
  .text {
    margin-right: 10rpx;
  }
}
.list-view {
  padding: 30rpx;
  border-radius: 32rpx;
  background-color: #fff;
  margin-bottom: 30rpx;
  .title {
    font-size: 32rpx;
    margin: 30rpx 0;
  }
  .img-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 20rpx 0;
    .u-transition {
      margin-bottom: 10rpx;
    }
    .u-transition:nth-child(2) {
      margin: 0 10rpx;
    }
    .u-transition:nth-child(5) {
      margin: 0 10rpx;
    }
  }
  .img-wrap::after {
    height: 0;
    visibility: hidden;
  }
  .bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: $uni-text-color-grey;
    .option-view {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .option-item {
        display: flex;
        align-items: center;
        margin: 0 20rpx;
      }
    }
  }
}
.btn-view {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background-color: #f5f6fa;
  .btn {
    width: 140rpx;
    height: 140rpx;
    font-size: 32rpx;
    color: #fff;
    text-align: center;
    line-height: 140rpx;
    background-color: #f60303;
    border-radius: 50%;
    margin-bottom: 60rpx;
    margin-top: 30rpx;
  }
}
</style>
